<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>点击我</button>
    <button>点击我</button>
    <script>
        var btn1 = document.querySelector('button');
        var btn2 = document.querySelectorAll('button')[1];
        /**
         * DOM0级事件绑定：
         * 元素.on事件类型 = function(){}
         * DOM0级同一事件不可追加 设置了同一事件 后面事件会覆盖前面的事件 
        */
        btn1.onclick = function () {
            alert('我第一次被点击')
        }
        btn1.onclick = function () {
            console.log(this, 'this指向当前正在接收事件元素')
            alert('我被第二次点击')
        }
        //  DOM0级事件进行解绑 元素.on事件类型 = null;
        btn1.onclick = null;

        /**
         * DOM2级事件绑定 
         * 优势：同一类型事件可以重复追加 会依次执行
         * addEventListener 参数：事件类型 事件处理程序(具名函数) 布尔值/false/true
         * 第三个参数 默认值是false 表示事件在冒泡阶段执行 事件从内向外触发
         * true 表示事件在捕获阶段执行 事件从外向内触发
        */
        function handler1() {
            alert('dom2级事件第一次触发')
        }
        function handler2() {
            alert('dom2级事件第二次触发')
        }
        btn2.addEventListener('click', handler1, false);
        btn2.addEventListener('click', handler2, false);
        //  dom2级事件解绑 参数：解绑事件类型 解绑事件处理程序(具名函数)
        btn2.removeEventListener('click', handler1);

    </script>
</body>

</html>